Day25:Vue.js（七）

第 12 屆 iThome 鐵人賽

DAY 25

Modern Web

小白的JavaScript讀書日記系列第 25 篇

12th鐵人賽

q20038848

2020-09-26 22:30:04

644 瀏覽

分享至

Component 組件/元件

Component是一個可以被重複使用的實體
Component帶有自己的data，computed，metoods...以及Hooks function等。

全域組件

在全域註冊的組件可以被用在被註冊之後的任何透過(new )新建立的Vue根實體的模板中。
語法：Vue.component(tagName,{options})

tagName:組件名稱； <tagName></tagName>
options:屬性；將功能寫在裡面。

<body>
  <div id="demo">
    <component-a></component-a>
    <component-b></component-b>
  </div>
  <script>

    Vue.component('component-a', {
      methods: {
        clickME: function () {
          alert("I'm btnA")
        }
      },
      template:
        `<button @click='clickME'>Click BtnA</button>`
    });
    Vue.component('component-b', {
      methods: {
        clickME: function () {
          alert("I'm btnB")
        }
      },
      template:
        `<button @click='clickME'>Click BtnB</button>`
    })
    const vm = new Vue({
      el: '#demo'
    })
  </script>
</body>

上述範例可以看到我們寫了兩個全域的組件名稱是component-a和component-b，可以在HTML看到有對應的兩組標籤<component-a></component-a>和<component-b></component-b>，當各自的按鈕被點擊時，會各自alert出對應的字串。

區域組件

將全域組件改寫成區域組件：

<body>
  <div id="demo">
    <component-a></component-a>
    <component-b></component-b>
  </div>
  <script>
    //寫兩個物件
    const componentA = {
      methods: {
        clickME: function () {
          alert("I'm btnA")
        }
      },
      template:
        `<button @click='clickME'>Click BtnA</button>`
    };

    const componentB = {
      methods: {
        clickME: function () {
          alert("I'm btnB")
        }
      },
      template:
        `<button @click='clickME'>Click BtnB</button>`
    };

    //將物件放到components裡面
    const vm = new Vue({
      el: '#demo',
      components: {
        'component-a': componentA,
        'component-b': componentB
      }
    })
  </script>
</body>

區域組件一定要透過components屬性宣告後才能使用。

組件中的data

在組件中的data有別於我們一開始使用的data，在組件裡的是必須用函式的形式（我們在Vue實體裡面的data是物件形式）。

<body>
  <div id="demo">
    <component-a></component-a>
  </div>
  <script>
    Vue.component('component-a', {
      //data以物件形式表示
      data: {
        count: 0
      },
      template: `<button @click='count++'>Click ME for {{count}}</button>`
    });
    const vm = new Vue({
      el: '#demo'
    });
  </script>
</body>

上述是將用物件形式來表示

data

這在console裡面就會報錯：

我們將data以函式來寫：

<body>
  <div id="demo">
    <component-a></component-a>
  </div>
  <script>
    Vue.component('component-a', {
      //data以函式表示
      data() {
         return {
           count: 0
         }
       },
      template: `<button @click='count++'>Click ME for {{count}}</button>`
    });
    const vm = new Vue({
      el: '#demo'
    });
  </script>
</body>

這時程式可以正常執行！

這是因為物件在JavaScript中是以『傳址』(Pass by reference)的方式來傳輸資料，如果沒透過函式來回傳另一個新的物件，則相同的組件就會共用一個資料，為了避免這樣的事情發生，Vue.js直接強制規定組件裡的data必須用函式來輸出資料。

Component與標籤的命名規則

只要合法於JavaScript的命名都可以過，但為了可讀性，還是有了以下的命名規則：
Component在使用上是以標籤的方式，為了避免與原生的HTML標籤產生衝突，通常會以兩個單子加上-的寫法(以上述為例)：
Vue.component('component-a',{...})
這樣在HTML顯示的標籤就是:
<component-a></component-a>